<template>
  <AppLayout>
    <div class="home">
      <div class="banner">
        <el-carousel height="400px">
          <el-carousel-item v-for="(item, index) in banners" :key="index">
            <div class="banner-item" :style="{ backgroundImage: `url(${item.image})` }">
              <div class="banner-content">
                <h2>{{ item.title }}</h2>
                <p>{{ item.description }}</p>
                <el-button type="primary" size="large" @click="goToGame(item.id)">立即体验</el-button>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="section mt-20">
        <div class="section-header flex-between">
          <h2>热门游戏</h2>
          <router-link to="/games">
            <el-button type="text"
              >查看全部 <el-icon><arrow-right /></el-icon
            ></el-button>
          </router-link>
        </div>
        <div class="game-list">
          <el-row :gutter="20">
            <el-col :span="6" v-for="game in popularGames" :key="game.id">
              <el-card shadow="hover" class="game-card" @click="goToGame(game.id)">
                <img :src="game.cover" class="game-cover" />
                <div class="game-info">
                  <h3>{{ game.title }}</h3>
                  <p>{{ game.description }}</p>
                  <div class="game-meta flex-between">
                    <span>{{ game.category }}</span>
                    <el-rate v-model="game.rating" disabled text-color="#ff9900"></el-rate>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="section mt-20">
        <div class="section-header">
          <h2>游戏特色</h2>
        </div>
        <div class="features">
          <el-row :gutter="20">
            <el-col :span="8" v-for="(feature, index) in features" :key="index">
              <div class="feature-item">
                <el-icon :size="50" class="feature-icon">
                  <component :is="feature.icon"></component>
                </el-icon>
                <h3>{{ feature.title }}</h3>
                <p>{{ feature.description }}</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import AppLayout from "../components/layout/Layout.vue";
import { ArrowRight } from "@element-plus/icons-vue";

defineOptions({
  name: "HomePage",
});

const router = useRouter();

// 模拟数据
const banners = ref([
  {
    id: 1,
    title: "舞力全开",
    description: "用身体感受音乐的律动，展现你的舞蹈才华",
    image: "https://via.placeholder.com/1200x400",
  },
  {
    id: 2,
    title: "虚拟现实冒险",
    description: "沉浸式体验，探索未知的虚拟世界",
    image: "https://via.placeholder.com/1200x400",
  },
  {
    id: 3,
    title: "体感格斗竞技",
    description: "真实的格斗体验，挑战你的反应能力",
    image: "https://via.placeholder.com/1200x400",
  },
]);

const popularGames = ref([
  {
    id: 1,
    title: "舞动奇迹",
    description: "跟随音乐节奏，展现你的舞蹈才华",
    cover: "https://via.placeholder.com/300x200",
    category: "舞蹈",
    rating: 4.5,
  },
  {
    id: 2,
    title: "太空冒险",
    description: "探索浩瀚宇宙，与外星生物互动",
    cover: "https://via.placeholder.com/300x200",
    category: "冒险",
    rating: 4.2,
  },
  {
    id: 3,
    title: "格斗之王",
    description: "体感格斗游戏，考验你的反应能力",
    cover: "https://via.placeholder.com/300x200",
    category: "格斗",
    rating: 4.7,
  },
  {
    id: 4,
    title: "虚拟运动会",
    description: "在家中体验各种体育运动的乐趣",
    cover: "https://via.placeholder.com/300x200",
    category: "运动",
    rating: 4.0,
  },
]);

const features = ref([
  {
    icon: "Monitor",
    title: "高清画质",
    description: "4K超高清画质，带来身临其境的视觉体验",
  },
  {
    icon: "Connection",
    title: "实时互动",
    description: "先进的体感技术，实现精准的动作捕捉和实时反馈",
  },
  {
    icon: "User",
    title: "多人游戏",
    description: "支持多人同时在线，与好友一起享受游戏乐趣",
  },
]);

const goToGame = (id) => {
  router.push(`/game/${id}`);
};
</script>

<style scoped>
.banner {
  margin-bottom: 30px;
}

.banner-item {
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.banner-content {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
  max-width: 500px;
  margin-left: 50px;
}

.banner-content h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.banner-content p {
  margin-bottom: 20px;
}

.section {
  margin-bottom: 40px;
}

.section-header {
  margin-bottom: 20px;
}

.game-card {
  cursor: pointer;
  transition: transform 0.3s;
  height: 100%;
}

.game-card:hover {
  transform: translateY(-5px);
}

.game-cover {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.game-info {
  padding: 15px 0;
}

.game-info h3 {
  margin-bottom: 10px;
}

.game-meta {
  margin-top: 10px;
}

.feature-item {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  background-color: #f5f7fa;
  height: 100%;
}

.feature-icon {
  color: #409eff;
  margin-bottom: 15px;
}

.feature-item h3 {
  margin-bottom: 10px;
}
</style>
